<template>
    <div style="padding-bottom: 1.4rem;">
        <div class="mall">
            <div class="mall_header box">
                <div class="header-left">
                    <div class="mall_logo"><img src="../../assets/img/logo.jpg" alt="logo"></div>
                </div>

                <div class="header-input">
                    <van-search v-model="word" placeholder="请输入搜索关键词" @search="getSearch" />
                </div>

            </div>

            <div class="wrapper" ref="wrapper">
                <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                  <van-swipe-item  v-for = "item of swiperList" :key = "item.id">
                      <img class="swiper-img" style="width: 100%;border-radius: 4px;" @click="goBanner(item.url)" v-lazy="item.cover"/>
                  </van-swipe-item>
                </van-swipe>
            </div>
            <div class="mall_hot">
                <div class="mall_hot_bj">
                  <div class="mall_hot_img">
                      <img src="../../assets/img/hot.png" alt="">
                  </div>
                  <div class="goods_block" v-for = "item of goods_hot" :key = "item.id">
                      <div class="goods_block_img" @click="goDetail(item.id)">
                        <img v-lazy="item.cover">
                      </div>
                      <div class="goods_block_desc">
                        <div class="goods_block_title" @click="goDetail(item.id)">{{item.title}}
                          <span>{{item.describe}}</span>
                        </div>
                        <div class="goods_block_payinfo">
                          <div class="goods_block_price" @click="goDetail(item.id)">
                            ￥{{item.price}}
                          </div>
                          <div class="goods_block_jf">
                            <div class="jf_border"></div>不可使用积分抵扣
                          </div>
                          <div class="goods_cart">
                            <span class="iconfont">&#xe748;</span>
                            <span @click="add(item.id)">加入购物车</span>
                          </div>
                        </div>
                      </div>
                  </div>
                  <div style="height: .3rem;"></div>
                </div>
            </div>

            <div class="mall_gift" @click="goDetail(item.id)" v-for="(item) in goods_gift" v-if="goods_gift.length > 0">
                    <img v-lazy="item.cover">
            </div>
            <nav class="mall_nav box">
                <div style="display: flex;">
                  <p v-for = "(item) in navList"
                  :key = "item.id"
                  @click = "activeType(item.id)"
                  :class = "{active: item.id == active}">{{item.title}}</p>
                </div>
            </nav>

            <div class="mall_content box" style="display: block;">
                <div class="mall_goods">

                        <div class="mall_goods_block" v-for = "item of goods" :key = "item.id">
                            <div class="goods_img box"  @click="goDetail(item.id)">
                                <img v-lazy="item.cover"/>
                            </div>

                            <div class="goods_menu">
                                <h2 @click="goDetail(item.id)" v-html="formatName(item.title)"></h2>
                                <div class="goods_jf" v-if="item.jf > 0">
                                  <div class="jf_border"></div>可使用积分抵扣
                                </div>
                                <div class="goods_jf no" v-else>
                                  <div class="jf_border"></div>不可使用积分抵扣
                                </div>
                                <div class="goods_bottom" @click="add(item.id)">
                                    <span class="old">￥{{item.price}}</span>
                                    <span class="old del">￥{{item.base_price}}</span>
                                </div>
                                <div class="mall_cart" @click="add(item.id)">
                                    <span class="iconfont">&#xe748;</span>
                                    <div class="cart_text">加入购物车</div>
                                </div>
                            </div>
                        </div>

                </div>
            </div>
        </div>
        <div class="van-list__finished-text" style="line-height: 20px;color: #fbe9e6;"></div>
        <jm-footer ref="footer" @eventGetFootHeight="getFootHeight"></jm-footer>
    </div>
</template>
<script>
    import { Toast } from 'vant'
    import JmFooter from '../footer/footer'
    import { getType, getMall, getHot } from "@/api/good"
    import { add } from "@/utils/handler-good"
    import { getSwiperList } from "@/api/swiper";
    import Vue from 'vue'
    import { Search,Swipe, SwipeItem,Lazyload  } from 'vant';

    Vue.use(Search).use(Swipe).use(SwipeItem).use(Lazyload)
    export default {
        name: 'mall',
        components: {
            JmFooter,
        },
        data () {
            return {
                goods: [],
                active: 0,
                navList: [],
                loading: false,
                finished: false,
                page: 1,
                contentHeight: 0,
                swiperList: [],
                word: '',
                goods_hot:'',
                goods_gift:''

            }
        },
        computed: {
            showSwiper () {
                return this.swiperList.length
            },
        },
        methods: {
            goBanner(url) {
              location.href = url
            },
            goDetail(id) {
                this.$router.push({path: '/good/detail', query: {id}})
            },
            getType() {
                getType({}).then(res => {
                    this.navList = res.data
                    this.active = res.data[0].id
                })
            },
            getMall() {
                getMall({word: this.word, good_type_id: this.active, page: this.page}).then(res => {
                    this.goods = res.data
                })
            },
            getHot(type) {
                const that = this
                getHot({type:type}).then(res => {
                    that.goods_hot = res.data
                })
            },
            getGift(type) {
                const that = this
                getHot({type:type}).then(res => {
                    that.goods_gift = res.data
                })
            },
            getFootHeight(h) {
                this.contentHeight = window.innerHeight - h
            },
            activeType(id, type='init') {
                if (type != 'search') {
                  this.word = ''
                }
                this.active = id
            },
            add(id) {
                add(id)
                Toast.success({message: '加入成功', duration: 2000})
                this.$refs.footer.getCar()
            },
            getSwiperList(){
                getSwiperList({type:1}).then(res => {
                    this.swiperList = res.data;
                })
            },
            getSearch() {
                this.activeType(this.active, 'search')
            },
            formatName(name) {
                if (this.word === '') {
                    return name
                } else {
                    return name.replace(this.word, `<b style="color:#d64532">${this.word}</b>`)
                }
            }
        },
        mounted() {
            this.getType()
            this.getMall()
            this.getHot(2)
            this.getGift(3)
        },
        activated: function () {
            this.getSwiperList();
            this.$refs.footer.activeChange(0)
            this.$refs.footer.getCar()
        },


    }
</script>

<style lang="stylus" scoped>
    @import "~styles/varibles.styl"
    .van-search
        padding: 0;
        margin-left: .2rem;
        border-radius: .6rem;
    .van-cell
        line-height .7rem
    .van-search .van-cell
        padding: 0 8px 0 0
    .van-search__content
        border-radius 8px
    .wrapper >>> .swiper-pagination-bullet
        width: .1rem
        height: .1rem
        background: #f68
        opacity: 0.2
    .wrapper >>> .swiper-pagination-bullet-active
        opacity: 1
        background: #f68
        width: .36rem
        height: .1rem
        border-radius: .1rem
    .mall_hot
        margin: .3rem auto;
        position: relative;
        .mall_hot_bj
            background: #ec2831;
            width: 90%;
            margin: auto;
            border-radius: 10px;
            padding-top: .8rem;
            .mall_hot_img
                position: absolute;
                top: -.2rem;
                left: 30%;
                width 3rem
                img
                    width 100%
                    height 100%
            .goods_block
                width: 90%;
                display: flex;
                background-color: white;
                margin: .3rem auto 0;
                border-radius: 10px;
                .goods_block_img
                    width: 2.5rem;
                    height: 2.3rem;
                    border-radius: .08rem;
                    margin: .3rem;
                    img
                      width 100%
                      height 100%
                .goods_block_desc
                    -webkit-box-flex: 1;
                    flex: 1;
                    -webkit-flex: 1;
                    padding: .3rem .1rem .3rem 0;
                    .goods_block_title
                      width: 100%;
                      font-size: .32rem;
                      span
                        width: 50%;
                        font-size: .25rem;
                        color: #c2c2c2;
                        margin-left: .1rem;
                    .goods_block_payinfo
                        overflow: hidden;
                        font-size: .26rem;
                        .goods_block_price
                          color: #d64532;
                          padding: .1rem 0;
                        .goods_block_jf
                          color: #b7b7b7;
                          border: 1px solid #ffab7d;
                          display: inline-block;
                          font-size: .25rem;
                          margin-bottom: .3rem;
                          .jf_border
                            width: .1rem;
                            height: .1rem;
                            border: 1px solid #ffab7d;
                            position: relative;left: -.05rem;
                            border-left: 0px;
                            background: white;
                            display: inline-block;
                        .goods_cart
                            border: 1px solid #e7af26;
                            color: white;
                            background-image: linear-gradient(45deg, #f65f5d, #e7af26);
                            display: flex;
                            border-radius: 15px;
                            width: 70%;
                            float: right;
                            span
                                margin auto
                                font-size .2rem
                            .iconfont
                                font-size .5rem
    .mall_gift
        width 90%
        margin: 0 auto .3rem;
        box-shadow: 0.6px 1px 10px 1px rgba(253,232,201,.38);
        img
          width 100%
          height 100%
    .mall_nav::-webkit-scrollbar{
        width:1px;
        height:1px;
    }
    .wrapper{
      margin-top: 1.2rem;
    }
    .wrapper img{
        width: 100%
    }
    .mall_nav::-webkit-scrollbar-track{
        background: rgba(239, 239, 239, 0);
        border-radius: 2px;
    }
    .mall_nav::-webkit-scrollbar-thumb{
        background: #fff;
        border-radius:10px;
    }
    .mall_nav::-webkit-scrollbar-thumb:hover{
        background: #fff;
    }
    .mall_nav::-webkit-scrollbar-corner{
        background: #fff;
    }
    .mall
        overflow: scroll;
        .mall_header
            display: flex
            background: #fe0039
            padding: .3rem.3rem 1rem
            // position: fixed
            top: 0
            left: 0
            width: 100%
            border-bottom-left-radius: 15%;
            border-bottom-right-radius: 15%;
            .header-left
                overflow: hidden
                .mall_logo
                    width: 1.3rem;
                    height: 1.2rem;
                    overflow: hidden
                    img
                        width:100%
                        height: 100%;
            .header-input
                flex: 1
                overflow: hidden
                margin: auto;
                input
                    height: .64rem
                    line-height: .64rem
                    margin-left: .3rem
                    padding-left: .2rem
                    color: #ccc
                    background: #f7f7f7
                    border-radius: 1rem
        .wrapper
            width: 90%;
            margin: auto;
            .my-swipe
                width: 100%;
                border-radius: 10px;
                bottom: .6rem;
                box-shadow: 0.6px 10px 10px 1px rgba(253,232,201,.38);
        .mall_nav
            background: #fff
            top: 1.3rem
            left: 0
            z-index: 999
            width: 100%
            display: -webkit-box
            display: -ms-flexbox
            display: flex
            -webkit-box-align: middle
            -ms-flex-align: middle
            align-items: middle
            overflow-x: auto
            background-image: linear-gradient(#17c2d1,#1583ab);
            border-bottom: 2px solid #a3bdc3;
            border-top: 1px solid #a3bdc3;
            p
                float left
                color: #e5dbdd
                font-size: .28rem
                padding 0 .2rem
                line-height .5rem
                -ms-flex-negative: 0
                flex-shrink: 0
            .active
                color: #e5dbdd
                display: inline-block;
                background: red;
                background-image: linear-gradient(#e43e42, #f86f3c);
                border-top: 1px solid #efd8c0;
                border-right: 1px solid #c9b793;
                border-bottom: 1px solid #f2a360;
                border-left: 1px solid #d1c297;
                border-radius: 5px;
                margin: 0 .2rem;

        .mall_content
            display: none
            background: #fff
            overflow: hidden
            width: 100%
            .wrapper
                width: 100%
                height: 0
                overflow: hidden
                padding-bottom: 45%
                background: #fff
                .swiper-container
                    overflow: initial
                    .swiper-img
                        width: 100%
                .swiper-pagination
                    bottom: -.36rem
            .mall_goods
                display flex
                flex-wrap: wrap;
                .mall_goods_block
                    width: 45%;
                    border: 1px solid #f3f3f3;
                    display: inline-block;
                    border-radius: 10px;
                    margin: .1rem;
                    box-shadow: 0px 0px 2px 2px rgba(243,243,243,.38);
                    .goods_img
                        width  3rem
                        height  3rem
                        margin: .1rem auto;
                        img
                            width 100%
                            height 100%
                            border-radius 5px
                    .goods_menu
                        width: 90%;
                        margin: .1rem auto;
                        h2
                            font-size .32rem
                        .goods_jf
                            color: #d64532
                            border: 1px solid #ffab7d;
                            display: inline-block;
                            font-size: .2rem;
                            .jf_border
                                width: .1rem;
                                height: .1rem;
                                border: 1px solid #ffab7d;
                                position: relative;
                                left: -.02rem;
                                border-left: 0px;
                                background: white;
                                display: inline-block;
                        .no
                            color #b7b7b7
                        .goods_bottom
                            font-size .26rem
                            display inline-block
                            width 65%
                            // span
                            //     display inline-block
                            //     line-height .5rem
                            .old
                                color #d64532
                                font-size: .25rem;
                            .del
                                text-decoration:line-through;
                                margin: auto .05rem;
                                color #bfbdbb
                                font-size .2rem
                        .mall_cart
                            display: inline-block;
                            font-size: .15rem;
                            margin: auto;
                            text-align: center;
                            .iconfont
                                color: #ff791f;
                                font-size: .7rem;
                            .cart_text
                                color #c5c5c3


</style>
